<template>
  <!-- 模态框 -->
  <el-dialog
    v-model="dialogFormVisible"
    :title="dialogTitle"
    draggable
    destroy-on-close
    width="600px"
    @close="close"
  >
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      status-icon
      label-width="140px"
    >
      <el-form-item label="分类名称" prop="skuCategoryName">
        <el-input
          v-model="form.skuCategoryName"
          autocomplete="off"
          placeholder="请输入商品名称"
        />
      </el-form-item>
      <!-- 上传 -->
      <el-form-item label="商品图片" prop="images">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="#"
          :http-request="uploadFile"
          list-type="picture"
          limit="1"
        >
          <el-button type="primary">上传图片</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >确认</el-button
        >

        <el-button @click="cancel">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// 添加、修改 商品窗口
import { ref, reactive, defineProps } from "vue";
import { ElMessage } from "element-plus";
// 引入store
import { useStore } from "vuex";

const store = useStore();
// 获取父组件传入的值
const props = defineProps([]);
const emit = defineEmits([]);
var dialogFormVisible = ref(false);
const fileList = ref([]);
var dialogTitle = ref(""); // 弹出框标题

// 存放数据
const ruleFormRef = ref();

// 表单数据
let form = reactive({
  id: undefined,
  skuCategoryName: "",
  images: ""
});

// 验证规则
const rules = reactive({
  skuCategoryName: [
    {
      required: true,
      message: "名称不能为空",
      trigger: "change"
    }
  ]
});
// 重置表单
const reset = () => {
  form.id = undefined;
  form.skuCategoryName = "";
  form.images = "";
  fileList.value = [];
};
// 开启弹窗
const openDialog = (title: any = "新增商品", data: any = {}) => {
  dialogTitle = title;
  if (data.id) {
    form = reactive({ ...form, ...data });
  }
  // 开启
  dialogFormVisible.value = true;
};

//上传
const uploadFile = () => {};

// 表单确认回调
const submitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      form.images = fileList.value[0];
      if (!form.images) {
        return ElMessage({
          message: "请上传图片！",
          type: "error",
          showClose: true
        });
      }
      let formData = new FormData();
      if (form.id) {
        // 修改
        try {
          let res = await store.dispatch("category/editCategory", form);
          if (res) {
            dialogFormVisible.value = false; //关闭窗口
            ElMessage({
              message: "修改成功",
              type: "success",
              showClose: true
            });
          }
        } catch (error: any) {
          ElMessage({
            message: error,
            type: "error",
            showClose: true
          });
        }
      } else {
        // 添加
        // 获取到表单发请求 请求成功后关闭窗口
        try {
          formData.append("skuCategoryName", form.skuCategoryName);
          formData.append("images", form.images.raw);
          let res = await store.dispatch("category/addCategory", formData);
          if (res) {
            dialogFormVisible.value = false;
            ElMessage({
              message: "添加成功",
              type: "success",
              showClose: true
            });
            reset();
          }
        } catch (error: any) {
          ElMessage({
            message: error,
            type: "error",
            showClose: true
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 取消
const cancel = () => {
  dialogFormVisible.value = false;
};
// 关闭时触发回调
const close = () => {
  reset();
};
// 暴露方法
defineExpose({
  openDialog
});
</script>

<style>
.el-input {
  width: 300px;
}
</style>